<template>
  <div class="container">
    <baleTable
      :tableData="tableData"
      :tableHead="tableHeadOrderList"
      :isSearch="true"
      :isTableRowClick="true"
      :isTableSelect="activeTabs == 2"
      :tableLoading="tableLoading"
      :page="page"
      @pageSizeChange="pageSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @searchMethods="searchMethods"
      @handleRowClick="handleRowClick"
      @handleSelectionChange="handleSelectionChange"
      ref="baleTable"
    >
      <template #headLeft>
        <div
          @click="tabclick(item.val)"
          :class="[
            'tableStats-btn',
            'mr10',
            { 'tableStats-btn-active': item.val == activeTabs },
          ]"
          v-for="item in tabLeft"
          :key="item.val"
        >
          {{ item.label }}
        </div>
        <div
          v-if="activeTabs == 2"
          @click="bulkShipmentArr"
          :class="['tableStats-btn', 'mr10', 'tableStats-btn-active']"
        >
          批量发货
        </div>

        <span v-if="activeTabs == 3" class="tableStats-btn1">
          <el-input
            placeholder="请输入订单编号"
            clearable
            @change="handleInput"
            v-model="orderValue"
          >
            <el-button
              slot="append"
              @click="handleInput"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </span>
      </template>

      <template #product="{ scope }">
        <div
          class="mb5"
          v-for="item in JSON.parse(scope.row.product)"
          :key="item.id"
        >
          <el-popover trigger="hover" placement="top">
            <p>单价: {{ item.price }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ item.name }}*{{ item.count }}</el-tag>
            </div>
          </el-popover>
        </div>
      </template>
      <template #totalDetail="{ scope }">
        <div @click.stop="">
          <el-popover placement="top-start" width="200" trigger="hover">
            <div
              v-for="(item, index) in scope.row.price_detailCopy"
              :key="index"
            >
              {{ item.name }}:{{ item.value }}
            </div>
            <el-button size="small" type="primary" slot="reference"
              >价格详情</el-button
            >
          </el-popover>
        </div>
      </template>

      <template #unit_id="{ scope }">
        {{ scope.row.unit.name }}
      </template>

      <template #status="{ scope }">
        <el-tag :type="formatterStatus(scope.row.status).type">
          {{ formatterStatus(scope.row.status).name }}</el-tag
        >
      </template>
      <template #finish_time="{ scope }">
        {{
          scope.row.finish_time ? scope.row.finish_time : scope.row.cancel_time
        }}
      </template>
      <template #caozuo="{ scope }">
        <div @click.stop="" v-if="scope.row.status == '2'">
          <el-button type="primary" size="small" @click="printView([scope.row])"
            >打印处方</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="bulkShipment([scope.row.id])"
            >发货</el-button
          >
        </div>
      </template>
    </baleTable>
    <orderDetail ref="orderDetail" @refresh="getTableData"></orderDetail>
    <quDetail ref="quDetail" @refresh="getTableData"></quDetail>
    <message ref="message" @refresh="getTableData"></message>
  </div>
</template>

<script>
import tableFile from "@/components/tableFile.vue";
import { tableHeadOrderList } from "./config";
import { ApiGetDrugOrderList, ApiPostbulkShipment } from "@a/index";
import orderDetail from "./component/detail.vue";
import quDetail from "./component/quDetail.vue";
import message from "./component/message.vue";
export default {
  components: {
    tableFile,
    orderDetail,
    message,
    quDetail,
  },
  data() {
    return {
      ids: [],
      activeTabs: 1,
      tableHeadOrderList,
      formInline: {},
      orderValue: "",
      page: {
        page: 1,
        size: 25,
        total: 0,
      },
      tabLeft: [
        { label: "全部", val: 1 },
        { label: "待发货(配送订单)", val: 2 },
        { label: "待发货(自取订单)", val: 3 },
      ],
      searchParams: {},
      sortParams: {},
      tableLoading: false,
      tableData: [],
      statusFormatter: [
        {
          name: "待支付",
          code: "1",
          type: "danger",
        },
        {
          name: "已缴费",
          code: "2",
          type: "warning",
        },
        {
          name: "已发药",
          code: "3",
          type: "",
        },

        {
          name: "已取消",
          code: "4",
          type: "danger",
        },
        {
          name: "已评价",
          code: "5",
          type: "",
        },
        {
          name: "退款中",
          code: "6",
          type: "danger",
        },
      ],
    };
  },
  mounted() {
    this.getTableData();
    setTimeout(() => {
      /*    this.getData(); */
    }, 3000);
  },

  methods: {
    printView(row) {
      window.open(row[0].advice.advice_pic)
    },
    handleInput() {
      this.getTableData("", this.orderValue);
    },
    handleSelectionChange(row) {
      this.ids = row.map((item) => {
        return item.id;
      });
    },
    //批量发货按钮
    bulkShipmentArr() {
      if (this.ids.length > 0) {
        this.bulkShipment(this.ids);
      } else {
        this.$message.error("请选择订单");
      }
    },

    bulkShipment(ids) {
      this.$confirm("是否确认发货?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        center: true,
        type: "warning",
      })
        .then((res) => {
          ApiPostbulkShipment({ ids }).then((res) => {
            this.$message.success("发货成功");
            this.getTableData();
          });
        })
        .catch((err) => {});
    },

    tabclick(val) {
      this.activeTabs = val;
      this.clear();
      this.changeTableData(val);
    },
    clear() {
      this.sortParams = {};
      this.selectParams = {};
      this.searchParams = {};
      this.$refs["baleTable"].clear();
    },

    //切换下拉框
    /*   getData() {
        const index1 = this.tableHeadOrderList.findIndex(
          (item) => item.prop === "status"
        );
        if (index1 >= 0) {
          this.tableHeadOrderList[index1].searchOptions = this.statusFormatter;
        }
      }, */
    formatterStatus(val) {
      let data = this.statusFormatter.find((item) => {
        if (item.code == val) {
          return item;
        }
      });
      if (data) {
        return data;
      } else {
        return val;
      }
    },

    changeTableData(params) {
      const index = this.tableHeadOrderList.findIndex((item) => {
        return item.prop == "express_no";
      });
      if (params == 1) {
        this.page.page = 1;
        this.formInline = {};
      }
      if (params == 2) {
        this.page.page = 1;
        this.formInline.status = "2";
        this.formInline.order_type = "快递到家";
        if (index == -1) {
          this.tableHeadOrderList.splice(5, 0, {
            label: "快递单号",
            prop: "express_no",
            specialProp: "",
            width: 140,
            align: "center",
            isSort: false,
            isSearch: true,
            isShow: true,
            serchType: "input",
            searchValue: "",
            searchOptions: [],
          });
        }
      }
      if (params == 3) {
        this.page.page = 1;
        this.formInline.status == "2";
        this.formInline.order_type = "到院自取";
        if (index != -1) {
          this.tableHeadOrderList.splice(index, 1);
        }
      }
      this.getTableData();
    },

    //订单列表
    getTableData(params = {}, order_no) {
      let postParams = {
        ...this.formInline,
        ...this.sortParams,
        ...this.page,
        ...params,
        ...this.searchParams,
        type: "pay",
      };
      this.tableLoading = true;
      this.tableData = [];
      if (order_no) {
        postParams.order_no = order_no;
      }
      ApiGetDrugOrderList(postParams)
        .then((res) => {
          let { data, page } = res;
          this.tableData = data;
          this.page.total = page.total;
          this.tableLoading = false;
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },

    searchMethods(params) {
      this.searchParams = {};
      this.page.page = 1;
      //重置当前订单数据
      this.searchParams = params;
      this.getTableData();
    },
    pageSizeChange(val) {
      this.page.size = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.getTableData();
    },

    //订单详情列表查看
    handleRowClick(row) {
      if (row.row.order_type == "快递到家") {
        this.$refs.orderDetail.show(row.row);
      } else {
        this.$refs.quDetail.show(row.row);
      }
    },
    showDialog(row) {
      this.$refs.message.show(row.id);
    },
  },
};
</script>
<style lang="less" scoped>
.enter {
  height: 100%;

  .red {
    color: red;
  }

  .green {
    color: green;
  }
}
.tableStats-btn1 {
  display: inline-block;
  font-size: 14px;
  // line-height: 1;
  background: #fff;
  box-sizing: border-box;
}
</style>

